<html>
    <head>
        <title>youdu</title>
        
        <style>
            #xy{
                color: hsl(239, 100%, 50%);
            }
            #testMouse{
                width: 500px;
                height: 500px;
                border: 10px red solid;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    
        <!--rel表示链接文档和当前文档的关系，stylesheet表示是引入一个外部样式表到本文档
        href表示链接文档的url地址-->
        <link rel="stylesheet" href="./study.css" >
    
    </head>
    <body>
        <span id='xy'>dsafd</span>
        <div id='testMouse'>
            随便移动鼠标试试！
        </div>

        <script>
        $('#testMouse').text('suibian'); //在这里修改值，就像原生js的innerText=xxx一样
        $('#testMouse').css({'width':'800px'}); //修改节点的css属性
        $('#xy').hide(); //给节点添加隐藏效果



            console.log(document.getElementById('xy').innerText);
















            //某个节点触发了某个事件就会执行某个函数
            //当 HTML文档加载完毕后，立刻执行某个方法，类似于windows.onload=function(){}
             $('document').ready(function(e){ 
                $('#testMouse').mousemove(function(e){ //选择testMouse节点，触发鼠标移动后就执行这个匿名函数
                    $('#xy').text('x:'+e.pageX+'y:'+e.pageY);//选择xy节点，使用text方法输出信息，类似innerText
                });
            });
        </script>








        <a name="maobiaoji">这是一个锚标记</a>
        <br>
        <br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>







        一、页面链接
        1._blank表示用新网页打开此链接
          _self表示用本网页打开此链接
        <a href="https://www.baidu.com" target="_blank">点击这个文字跳转到百度</a>
        <a href="Form.html" target="_self">点击这个文字跳转到同级目录的form.html</a>
        2.不仅点击文字可以跳转，点击图片也可以实现链接跳转
        <a href="https://www.baidu.com" target="_blank">
            <img src="./1.jpg" alt="可跳转图片" title="点击我跳转" width="300" height="300">
        </a>







        <table>表示要建立一个表格，<tr>表示要建立行，<td>表示要建立列
        colspan属性表示这一列占几列的规模，rowspan表示这一行占几行的规模
        <table border="1px">
            <tr id='xiaoming'> 
                <td rowspan="2" colspan="5">一行一列</td>
                <td rowspan="2">一行二列</td>
                <td>一行三列</td>
                <td>一行四列</td>
            </tr>
            <tr>
                <td>二行一列</td>
                <td>二行二列</td>
            </tr>            
            <tr>
                <td>三行一列</td>
                <td>三行二列</td>
                <td>三行三列</td>
            </tr>
        </table>

    </body>
</html>